<template>
	<div>
		<div v-if="pageIndex==1" class="content">
			<div class="bg u-m-b-20">
				<div class="pane"></div>
				<div class="content-bg" :style=" 
     {backgroundImage:`url(${sourceBg})`}"></div>
			</div>
			<div class="u-p-t-80 u-p-b-50">
				<text class="info-title u-m-r-30">信息溯源中</text>
				<u-count-to :autoplay="false" ref="uCountTo" :bold="true" font-size="44" color="#19be6b" :start-val="0" :end-val="100"
				 :duration="3000"></u-count-to>
				<text class="info-icon u-m-l-5">%</text>
			</div>
			<div>
				<div class="source-item" v-if="itemIndex>0">
					<text class="source-title u-m-r-30">产品信息:</text>
					<text class="source-info u-m-r-20">已溯源</text>
					<u-icon name="checkbox-mark" size="34" color="#71D5A1"></u-icon>
				</div>
				<div class="source-item" v-if="itemIndex>1">
					<text class="source-title u-m-r-30">加工信息:</text>
					<text class="source-info u-m-r-20">已溯源</text>
					<u-icon name="checkbox-mark" size="34" color="#71D5A1"></u-icon>
				</div>
				<div class="source-item" v-if="itemIndex>2">
					<text class="source-title u-m-r-30">检验信息:</text>
					<text class="source-info u-m-r-20">已溯源</text>
					<u-icon name="checkbox-mark" size="34" color="#71D5A1"></u-icon>
				</div>
				<div class="source-item" v-if="itemIndex>3">
					<text class="source-title u-m-r-30">养殖环境:</text>
					<text class="source-info u-m-r-20">已溯源</text>
					<u-icon name="checkbox-mark" size="34" color="#71D5A1"></u-icon>
				</div>
				<div class="source-item" v-if="itemIndex>4">
					<text class="source-title u-m-r-30">生产资质:</text>
					<text class="source-info u-m-r-20">已溯源</text>
					<u-icon name="checkbox-mark" size="34" color="#71D5A1"></u-icon>
				</div>
			</div>

		</div>
		<div v-else class="page">
			<div class="wrap location_id">
				<u-image width="100%" height="340rpx" src="/static/temp/header.jpg"></u-image>
				<div class="u-p-t-10 u-p-b-10 u-bg-while">
					<u-subsection @change="tabSelect" class="u-subsection" :list="subsection" :current="0" :animation="true" :bold="false"
					 bg-color="#FFF"></u-subsection>
				</div>
			</div>
			<u-gap height="10" bg-color="#f8f8f8"></u-gap>
			<u-cell-group>
				<u-cell-item :arrow="false" class="u-p-t-10 u-p-b-10">
					<u-icon slot="icon" size="40" name="info-circle-fill" class="cricle-success u-m-r-10 "></u-icon>
					<div slot="title">

						<text class="u-m-l-20">您查询的溯源码编号</text>
						<text class="u-m-l-20">{{sourceData.sourceCode}}</text>
					</div>
					<text slot="right-icon" class="cricle-success">通过</text>
				</u-cell-item>
			</u-cell-group>
			<u-gap height="10" bg-color="#f8f8f8"></u-gap>
			<u-row gutter="16">
				<u-col span="6">
					<div class="u-text-center u-padding-20 u-p-t-40">
						<div class="u-flex u-row-center">
							<u-image width="200rpx" class="product-img-shadow" height="200rpx" :src="sourceData.sourceProdUrl" shape="circle"></u-image>
						</div>
						<div class="u-font-32 u-m-t-16">{{sourceData.sourceProdType}}</div>
					</div>
				</u-col>
				<u-col span="6">
					<div class="u-text-center u-padding-20 u-p-t-40">
						<div class="u-flex u-row-center">
							<u-image width="200rpx" class="product-img-shadow" height="200rpx" :src="sourceData.picUrl" @click="preOne([sourceData.picUrl])"
							 shape="circle"></u-image>
						</div>
						<div class="u-font-32 u-m-t-16">{{sourceData.goodsName}}</div>
					</div>
				</u-col>
			</u-row>
			<div class="product-info u-m-40">
				<div class="u-p-30 product-info-title">

					{{sourceData.sourceProdDesc}}


				</div>
				<div class="u-flex u-row-between product-info-border">
					<div class="u-flex u-row-center u-flex-wrap product-info-content">
						<div class="u-font-30 u-m-b-16">{{sourceData.releaseDate&&sourceData.releaseDate.length>10?sourceData.releaseDate.substring(0,10):sourceData.releaseDate}}</div>
						<div class="u-font-24 text-gray">出栏时间</div>
					</div>
					<div class="u-flex u-row-center u-flex-wrap product-info-content">
						<div class="u-font-30 u-m-b-16">{{sourceData.sourceProdType}}</div>
						<div class="u-font-24 text-gray">品种</div>
					</div>
				</div>
			</div>
			<u-card title="产品描述" border-radius="30">
				<div class="product-desc" slot="body">
					<u-cell-group :border="false" :title-style="titleStyle">
						<u-cell-item :border-bottom="false" title="产品" :value="sourceData.goodsName" :arrow="false"></u-cell-item>
						<u-cell-item :border-bottom="false" title="质量等级" :value="sourceData.level" :arrow="false"></u-cell-item>
						<u-cell-item :border-bottom="false" title="执行标准" :value="sourceData.standards" :arrow="false"></u-cell-item>
						<u-cell-item :border-bottom="false" title="净含量" :value="sourceData.eight" :arrow="false"></u-cell-item>
						<u-cell-item :border-bottom="false" title="生产日期" :value="sourceData.productionTime" :arrow="false"></u-cell-item>
						<u-cell-item :border-bottom="false" title="存储条件" :value="sourceData.frozenStorage" :arrow="false"></u-cell-item>
						<u-cell-item :border-bottom="false" title="保质期" :value="sourceData.guaranteePeriod" :arrow="false"></u-cell-item>
						<u-cell-item :border-bottom="false" title="产地" :value="sourceData.address" :arrow="false"></u-cell-item>

					</u-cell-group>
					<div class="u-flex u-row-center" v-if="sourceData.urlbarcode">
						<u-image class="u-margin-26" width="300rpx" height="138rpx" :src="sourceData.urlbarcode"></u-image>
					</div>
				</div>
			</u-card>
			<u-card title="检疫检验" border-radius="30">
				<div class="product-desc" slot="body">
					<u-cell-group :border="false" :title-style="titleStyle">
						<u-cell-item v-for="item in sourceQuarantines" :key="item.id" :border-bottom="false" :title="item.quarantineName" :value="item.quarantineValue" :arrow="false"></u-cell-item>
						<u-cell-item :border-bottom="false" title="检疫证号" :value="sourceData.level" :arrow="false"></u-cell-item>
						
						
					
						<u-cell-item title="同步卫检验" :border-bottom="false" value="合格" :arrow-direction="checkItemShow?'up':'down'" @click="checkItemShow=!checkItemShow">
			
			
							<!-- <u-badge count="99" :absolute="false" slot="right-icon"></u-badge> -->
			
						</u-cell-item>
						<template v-if="checkItemShow">
						<u-cell-item v-for="item in sourceHygienes" :key="item.id" :border-bottom="false" :title="item.hygieneName" :value="item.hygieneValue" :arrow="false"></u-cell-item>
						</template>				
					</u-cell-group>

				</div>
			</u-card>
			
			<div class="location_id">
				<div class="check-group">
					<div class="check-title">权威认证</div>
					<div class="dashed-line"></div>
					<div class="cricle-success">
						<u-icon name="checkmark-circle" class="u-m-r-10"></u-icon>
						<text class="u-font-24">可追溯</text>
					</div>
				</div>
				<div class="check-container u-m-30">
					<div class="u-flex u-row-left check-border" v-for="item in sourceData.brandSourceAuts" :key="item.id">
						<div class="check-con-image">
							<u-image mode="aspectFit" width="100%" height="200rpx" @click="preOne([item.autUrl])" :src="item.autUrl"></u-image>
						</div>
						<div class="check-con-info">
							<div class="check-con-info-title">{{item.autName}}</div>
							<div class="u-font-24 u-m-b-8">颁证机构：{{item.autOrg}}</div>

							<div class="u-font-24 u-m-b-8">颁证日期：{{item.autTime}}</div>
						</div>
					</div>

				</div>
			</div>

			<div class="location_id">
				<div class="check-group">
					<div class="check-title">养殖环境</div>
					<div class="dashed-line"></div>
					<div class="cricle-success">
						<u-icon name="checkmark-circle" class="u-m-r-10"></u-icon>
						<text class="u-font-24">可追溯</text>
					</div>
				</div>

				<div style="overflow: hidden;">
					<div class="u-flex u-row-left u-row-center u-m-l-40">
						<div class="u-padding-20 u-margin-20">
							<u-time-line class="culture-group">
								<u-time-line-item v-for="item in sourceData.sourceBreeds" :kye="item.id">
									<template v-slot:node>
										<div class="u-node">
											<i class="u-circle u-circle-success"></i>
										</div>
									</template>
									<template v-slot:content>
										<div class="u-m-l-20 time-line-group">
											<div class="time-line-img">
												<image :src="item.breedUrl" @click="preOne([item.breedUrl])" mode=""></image>
											</div>
											<div class="u-flex u-row-between u-col-center">
												<div class="u-order-title">{{item.breedName}}</div>

											</div>
										</div>
									</template>
								</u-time-line-item>
							</u-time-line>
						</div>
					</div>
				</div>
			</div>
			<div class="location_id">
				<div class="check-group">
					<div class="check-title">加工环节</div>
					<div class="dashed-line"></div>
					<div class="cricle-success">
						<u-icon name="checkmark-circle" class="u-m-r-10"></u-icon>
						<text class="u-font-24">可追溯</text>
					</div>
				</div>
				<div style="overflow: hidden;">
					<div class="u-flex u-row-left u-row-center u-m-l-40">
						<div class="u-padding-20 u-margin-20">
							<u-time-line class="culture-group">
								<u-time-line-item v-for="item in sourceData.sourceMchgs" :kye="item.id">
									<template v-slot:node>
										<div class="u-node">
											<i class="u-circle u-circle-success"></i>
										</div>
									</template>
									<template v-slot:content>
										<div class="u-m-l-20 time-line-group">
											<div class="time-line-img">
												<image :src="item.mchgUrl" @click="preOne([item.mchgUrl])" mode=""></image>
											</div>
											<div class="u-flex u-row-between u-col-center">
												<div class="u-order-title">{{item.mchgName}}</div>
												<text class="u-order-time">{{item.mchgTime.substring(0,16)}}</text>
											</div>
										</div>
									</template>
								</u-time-line-item>
							</u-time-line>
						</div>
					</div>
				</div>

			</div>
			<div class="location_id">
				<div class="check-group">
					<div class="check-title">生产资质</div>
					<div class="dashed-line"></div>
					<div class="cricle-success">
						<u-icon name="checkmark-circle" class="u-m-r-10"></u-icon>
						<text class="u-font-24">可追溯</text>
					</div>
				</div>
				<div class="u-m-30 company-container">
					<div class="company-con-title">{{sourceData.name}}</div>
					<div>
						<u-swiper :list="list" @click="preOne(sourceData.propagandaUrl)" height="300rpx" border-radius="0"></u-swiper>
					</div>
					<div class="u-p-30 company-con-info">
						<div class="company-con-content">
							{{sourceData.desc}}
						</div>
						<div>
							<ul class="company-con-icon">
								<li @click="preVie(0)">
									<div>
										<u-avatar src="/static/company-icon1.png" size="default"></u-avatar>
									</div>
									<div>营业执照</div>
								</li>
								<li @click="preVie(1)">
									<div>
										<u-avatar src="/static/company-icon2.png" size="default"></u-avatar>
									</div>
									<div>生产许可</div>
								</li>
								<li @click="preVie(2)">
									<div>
										<u-avatar src="/static/company-icon3.png" size="default"></u-avatar>
									</div>
									<div>动物防疫</div>
								</li>
								<li @click="makePhone">
									<div>
										<u-avatar src="/static/company-icon4.png" size="default"></u-avatar>
									</div>
									<div>客服电话</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="u-m-t-50 ">
				<u-divider bg-color="#eff9f8">食品安全看得见</u-divider>
			</div>
	<!-- 		<div class="footer-container">
				<div class="footer">
					<div class="u-flex u-row-left">
						<u-avatar size="100" :src="sourceData.picUrl"></u-avatar>
						<div class="u-m-l-25">
							<div class="u-font-32 u-m-b-8 footer-title">{{sourceData.goodsName}}</div>
							<div class="u-font-26">新鲜有迹可循</div>
						</div>
					</div>
					<div>
						<div class="footer-buy-btn">
							<wx-open-launch-weapp id="launch-btn" username="gh_bd8e43731eca" path="/pages/cusCol/cusCol.html?cusColId=300">
								<script type="text/wxtag-template">
									<style>
										.btn{									
											width: 100%;
											margin-top: 10px;
											background: -webkit-gradient(linear, left top, right top, from(#50da85), to(#24be7e));
											background: -webkit-linear-gradient(left, #50da85, #24be7e);
											background: linear-gradient(45deg, #50da85, #24be7e);
											border: none !important;
											color: #fff;
											padding: 0px;
											border-radius: 4px;
											font-size: 28rpx;
										}
										.btn:active{
											opacity: 0.8;
										}
										</style>  
									<div style="width: 100%;text-align: center;">
										<button class="btn" >立即购买</button>
									</div> 
							</script>
							</wx-open-launch-weapp>
						</div>
					</div>
				</div>
			</div> -->
			<u-back-top :scroll-top="scrollTop" :icon-style="scrollTopStyle" style="custom-style"></u-back-top>

		</div>
	</div>
</template>

<script>
	import config from '../../utils/config.js'
	export default {
		data() {
			return {
				checkItemShow:false,
				navbarInitTop: 0,
				pageIndex: 1,
				itemIndex: 0,
				scrollTop: 0,
				sourceData: {},

				swiperList: [],
				swiperIndex: 0,
				title: 'Hello',
				titleStyle: {
					fontSize: '32rpx',
					'font-weight': 'bold',
					color: '#303133'
				},
				sourceBg: 'https://0831-xxys.oss-cn-qingdao.aliyuncs.com/3q7tf6m9zfkre2adwg2u.png',

				list: [],
				subsection: [{
						name: '产品信息'
					}, {
						name: '权威认证'
					},
					{
						name: '养殖环境'
					},
					{
						name: '加工环节'
					},
					{
						name: '生产资质'
					}
				],
				current: 1,
				scrollTopStyle: {
					color: '#19be6b',
					fontSize: '38rpx'
				},
				urls: [],
				sourceHygienes:[],
				sourceQuarantines :[],
			}
		},
		created() {
			this.initData();
		},
		onReady() {
			this.timer = setInterval(() => {
				this.itemIndex = this.itemIndex + 1;
				if (this.itemIndex > 4) {
					clearInterval(this.timer);
					this.pageIndex = 0;
				}
			}, 600)
			this.$refs.uCountTo.start();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			tabSelect(index) {
				let jump = document.querySelectorAll('.location_id');
				// 获取需要滚动的距离
				let total = jump[index].offsetTop
				let distance = document.documentElement.scrollTop || document.body.scrollTop
				// 平滑滚动，时长500ms，每10ms一跳，共50跳
				let step = total / 50
				if (total > distance) {
					smoothDown()
				} else {
					let newTotal = distance - total
					step = newTotal / 50
					smoothUp()
				}

				function smoothDown() {
					if (distance < total) {
						distance += step
						document.body.scrollTop = distance
						window.pageYOffset = distance
						document.documentElement.scrollTop = distance
						setTimeout(smoothDown, 10)
					} else {
						document.body.scrollTop = total
						window.pageYOffset = total
						document.documentElement.scrollTop = total
					}
				}

				function smoothUp() {
					if (distance > total) {
						distance -= step
						document.body.scrollTop = distance
						window.pageYOffset = distance
						document.documentElement.scrollTop = distance
						setTimeout(smoothUp, 10)
					} else {
						document.body.scrollTop = total
						window.pageYOffset = total
						document.documentElement.scrollTop = total
					}
				}
			},
			initData() {
				console.log(this.$route.query)
				uni.request({
					url: `https://managetest.xxys.life/demo/admin/source/source?sourceCode=${this.$route.query.sourceCode}`,
					method: 'GET',
					success: res => {
						this.sourceData = res.data.data;
						this.sourceBg = this.sourceData.sourceProdUrl;
						if (res.data.data.sourceMchgs) {
							this.swiperList = res.data.data.sourceMchgs.map(item => {
								return {
									image: item.mchgUrl,
									title: item.mchgTime.substring(0, 16)
								}
							});
						}
						console.log(res.data.data)
						this.sourceQuarantines =res.data.data.sourceQuarantines .reverse();
						this.sourceHygienes  =res.data.data.sourceHygienes  ;
						config(this.sourceData.picUrl);

						let urls = [];
						if (res.data.data.businessUrl) {
							urls.push(res.data.data.businessUrl);
						}

						if (res.data.data.productionUrl) {
							urls.push(res.data.data.productionUrl);
						}
						if (res.data.data.manageUrl) {
							urls.push(res.data.data.manageUrl);
						}
						this.urls = urls;
						this.list = this.sourceData.propagandaUrl.map(item => {
							return {
								image: item
							}
						});
					},
					fail: (e) => {
						console.log("getMachineNum fail:" + JSON.stringify(e));
					},
					complete: () => {}
				});
			},
			swiperChange(index) {
				this.swiperIndex = index
			},
			// 预览图片
			preVie(index) {

				let current = this.urls.length > index ? index : 0;

				uni.previewImage({
					current: this.urls[current],
					urls: this.urls,
					indicator: 'number'
				});
			},
			preOne(urls) {


				uni.previewImage({

					urls: urls,
					indicator: 'number'
				});
			},
			makePhone() {
				uni.makePhoneCall({
					phoneNumber: this.sourceData.customerPhone //仅为示例
				});
			}
		}
	}
</script>

<style scoped>
	.page {
		background-color: #eff9f8;
	}

	.u-bg-while {
		background-color: #fff;
	}

	.cricle-success {
		color: #19be6b;
	}

	.product-img-shadow {
		box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.3) !important;
	}

	.product-info {
		background-color: #fff;
		border-radius: 30rpx;
		overflow: hidden;
		padding: 0 30rpx;
		box-shadow: 0 0 10px -1px rgba(0, 0, 0, 0.1);
	}

	.product-info-title {
		border-bottom: 1px solid #eee;
		font-size: 24rpx;
		color: #777;
		line-height: 36rpx;
	}

	.product-info-border {
		position: relative;
	}

	.product-info-border::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%) rotate(13deg);
		transform: translate(-50%, -50%) rotate(13deg);
		border: 1px solid #e9eef5;
		height: 84rpx;
	}

	.product-info-content {
		width: 50%;
		margin: 30rpx 0;
	}

	.product-info-content div {
		width: 100%;
		text-align: center;
		letter-spacing: .5px;
	}

	.text-gray {
		color: #888;
	}

	.product-desc .u-cell {
		padding: 3px 0 !important;
	}

	.u-cell {
		padding: 3px 16rpx;
	}

	.check-container {
		border-radius: 30rpx;
		background: #fff;
	}

	.check-border {
		border-bottom: 1px solid #eee;
	}

	.check-border:last-child {
		border: none;
	}

	.check-con-image {
		width: 220rpx;
		padding: 30rpx;
	}

	.check-con-info {
		padding: 30rpx 30rpx 30rpx 10rpx;
	}

	.check-con-info .check-con-info-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 16rpx;
	}

	.check-group {
		margin: 50rpx 30rpx 30rpx;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
	}

	.check-group .dashed-line {
		width: 340rpx;
		height: 0;
		border-top: 1px dashed #d2dce9;
	}

	.check-group .check-title {
		font-size: 36rpx;
		font-weight: bold;
		border-left: 6rpx solid #19be6b;
		padding-left: 20rpx;
		height: 36rpx;
		line-height: 36rpx;
	}

	.box-shadow {
		box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.3);
	}


	.bg-purple {
		background: #d3dce6;
	}

	.u-title {
		font-size: 40rpx;
		font-weight: bold;
		margin: 40rpx;
	}

	.card {
		margin: 10rpx;
		border: 1;
		margin-left: 20rpx;
		height: 700rpx;
		width: 700rpx;
		background: white;
		box-shadow: 0px 0px 4px #000;
	}

	.u-item-title:after {
		position: absolute;
		width: 4px;
		top: -1px;
		height: 16px;
		content: "";
		left: 0;
		border-radius: 10px;
		background-color: #606266;
	}

	.u-cell {
		padding: 3px 16px;
	}

	.u-time-axis-node {
		background: initial;
	}

	.u-node {
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: none;
	}

	.u-circle {
		width: 10px;
		height: 10px;
		background: #ccc;
		border-radius: 50%;
	}

	.u-circle-success {
		background: #19be6b !important;
	}

	.time-line-group {
		background: #fff;
		border-radius: 30rpx;
		padding: 30rpx 30rpx 40rpx;
	}

	.u-order-title {
		color: #333333;
		font-size: 32rpx;
		font-weight: bold;
		letter-spacing: 2rpx;
	}

	.u-order-time {
		padding: 6rpx 12rpx;
		border-radius: 10rpx;
		color: #fff;
		font-size: 26rpx;
		background: -webkit-gradient(linear, left top, right top, from(#1fbe7d), to(#52dd87));
		background: -webkit-linear-gradient(left, #1fbe7d, #52dd87);
		background: linear-gradient(90deg, #1fbe7d, #52dd87);
	}

	.border-style {
		padding-bottom: 20rpx;
		border-bottom: 1px solid #e6e6e6;
	}

	.time-line-img image {
		width: 500rpx;
		height: 300rpx;
		margin-bottom: 30rpx;
		border-radius: 30rpx;
	}


	.img-title {
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		letter-spacing: 2rpx;
		margin: 40rpx 0 30rpx;
		color: #333;
	}

	/*轮播类*/
	.swiper-mode {
		padding: 0;
		margin: 0;
	}

	.swiper-mode li {
		float: left;
		list-style: none;
	}

	.swiper-mode .swiper-mode-circle {
		text-align: center;
		position: relative;
		color: #666;
		font-size: 24rpx;
		width: 130rpx;
	}

	.swiper-mode .swiper-mode-circle .dot-line {
		height: 20rpx;
		position: relative;
		width: 100%;
	}

	.swiper-mode .swiper-mode-circle .dot-line .icon-dot {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 20rpx;
		height: 20rpx;
		background: #eee;
		border: 1px solid #bbb;
		border-radius: 50%;
		z-index: 99;
	}

	.swiper-mode .swiper-mode-circle .dot-line .icon-dot::before {
		content: '';
		height: 0;
		border-top: 1px solid #dde4ed;
		width: 129rpx;
		display: block;
		z-index: 1;
		position: absolute;
		top: 50%;
		left: 24rpx;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
	}

	.swiper-mode .swiper-mode-circle:last-child .dot-line .icon-dot::before {
		width: 0;
		background-color: none;
	}

	.swiper-mode .swiper-mode-circle .step-name {
		padding-top: 20rpx;
	}

	/*轮播选中状态*/
	.swiper-mode .swiper-mode-circle-active .dot-line .icon-dot {
		background: #71D5A1 !important;
		border: none !important;
		box-shadow: 0 0 2px 2px #19be6b !important;
	}

	.swiper-mode .swiper-mode-circle-active .step-name {
		color: #19be6b !important;
	}

	/*企业信息*/
	.company-container {
		background: #fff;
		border-radius: 30rpx;
	}

	.company-container .company-con-title {
		padding: 30rpx;
		font-size: 36rpx;
		text-align: center;
	}

	.company-container .company-con-content {
		border-bottom: 1px solid #eee;
		padding-bottom: 30rpx;
		text-align: justify;
	}

	.company-container .company-con-icon {
		overflow: hidden;
		width: 100%;
		display: flex;
		justify-content: space-around;
		margin-top: 30rpx;
		padding: 0;
	}

	.company-container .company-con-icon li {
		list-style: none;
		float: left;
		text-align: center;
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}

	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}

	.footer-container {
		width: 86%;
		padding: 30rpx 20rpx 10rpx;

		bottom: 0;
		z-index: 999;
	}

	.footer {
		width: 100%;
		background: #dfeaec;
		border-radius: 30rpx;
		padding: 10rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 0 10px -1px rgba(0, 0, 0, 0.2);
	}

	.footer-title {
		font-weight: bold;
	}

	.footer-buy-btn {
		background: -webkit-gradient(linear, left top, right top, from(#50da85), to(#24be7e));
		background: -webkit-linear-gradient(left, #50da85, #24be7e);
		background: linear-gradient(45deg, #50da85, #24be7e);
		border: none !important;
		color: #fff;
		padding: 0px 40rpx;
		font-size: 28rpx;
		height: 40px;
		border-radius: 4px;
	}

	.u-back-top {
		background-color: rgba(255, 255, 255, 0.8) !important;
		border: 1px solid #19be6b;
		box-shadow: 0 0 10px -1px rgba(0, 0, 0, 0.2);
	}

	.content {
		text-align: center;
		padding-top: 80px;
		width: 100%;
		height: 100vh;
		background: linear-gradient(0deg, #d8eaea, #fff, #fff, #fff, #d8eaea);
	}

	.bg,
	.pane {
		width: 200px;
		height: 200px;
		margin: 0 auto;
		overflow: hidden;

		/* 隐藏显示区域外的内容*/
	}

	.bg {
		border-radius: 50%;
		position: relative;
		border: 2px solid rgba(117, 208, 165, 0.8);
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		box-shadow: 0 0 30px -3px rgba(0, 0, 0, 0.3);
	}

	.pane {
		position: absolute;
		z-index: 2;
		background: url(../../static/temp/4.png) center center no-repeat;
		animation: move 1.5s ease-in-out infinite;
		-webkit-animation: move 1.5s ease-in-out infinite;
	}

	.content-bg {

		background-size: 100% 100%;
		width: 185px;
		height: 185px;
		border-radius: 50%;
	}

	.info-title {
		font-size: 40rpx;
		letter-spacing: 1.5px;
	}

	.info-icon {
		font-size: 42rpx;
		color: #19be6b;
		font-weight: bold;
	}

	@keyframes move {
		from {
			top: -200px
		}

		/*网格移动到显示区域的外面*/
		to {
			top: 0
		}
	}

	-webkit-@keyframes move {
		from {
			top: -200px
		}

		to {
			top: 0
		}
	}


	.u-progress-content {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.u-progress-dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: #fb9126;
	}

	.u-progress-info {
		font-size: 28rpx;
		padding-left: 16rpx;
		letter-spacing: 2rpx
	}

	@keyframes fade-in {
		0% {
			opacity: 0;
		}

		/*初始状态 透明度为0*/
		40% {
			opacity: 0;
		}

		/*过渡状态 透明度为0*/
		100% {
			opacity: 1;
		}

		/*结束状态 透明度为1*/
	}

	@-webkit-keyframes fade-in {

		/*针对webkit内核*/
		0% {
			opacity: 0;
		}

		40% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	#source-item {
		animation: fade-in;
		/*动画名称*/
		animation-duration: 1.5s;
		/*动画持续时间*/
		-webkit-animation: fade-in 1.5s;
		/*针对webkit内核*/
	}

	.source-item {
		margin-bottom: 10rpx;
	}

	.source-title {
		font-size: 32rpx;
	}

	.source-info {
		font-size: 32rpx;
		color: #19BE6B;
	}
</style>
